<template>
	<view class="">
		<view class="add-box">
			<view class="textarea-box">
				<textarea v-model="content" placeholder="请输入" maxlength="500"></textarea>
			</view>
			<!-- <c-upload :imgs="imgList" :maxNum="20" :showText="false" width="120" @delImg="delImg"
				@addSuccess="addImg"></c-upload> -->
			<view class="upload-imgs-list">
				<view class="upload_camera upload-box fx-colum-center" @click="addImg">
					<van-icon name="plus" size="40rpx" color="#8A8F99" />
				</view>
				<view class="upload-imgs upload-box" v-for="(img,index) in imgList" :key="index">
					<image :src="img" mode="aspectFill" @click="$api.toPreviewImg(imgList,index)"></image>
					<image src="/static/img_cha.png" mode="widthFix" class="del-icon" @click="delImg(index)"></image>
				</view>
			</view>

			<view class="fx-center-between add-opration">
				<view class="fx-center">
					<view class="fx-center add-item" @click="showTopicDialog=true">
						<image src="/static/add_topic.png" mode="widthFix"></image>
						<view class="add-item-text" :style="getWordText === '添加话题' ? '' : 'color:#000000'">
							{{getWordText}}
						</view>
					</view>
					<view class="fx-center add-item" @click="showProjectDialog=true">
						<image src="/static/add_xm.png" mode="widthFix"></image>
						<view class="add-item-text" :style="getProjectText === '添加项目' ? '' : 'color:#000000'">
							{{getProjectText}}
						</view>
					</view>
				</view>

				<view class="num-tip"><text>{{content.length}}</text>/500</view>
			</view>
		</view>

		<view class="main-basic-btn">
			<van-button block color="#4078E5" @click="submit">发布</van-button>
		</view>
		<!-- 选择话题弹框 -->
		<van-popup :show="showTopicDialog" position="bottom" custom-style="border-radius: 4rpx 4rpx 0rpx 0rpx"
			@close="showTopicDialog=false">
			<view class="topic-dialog">
				<view class="dialog-title">
					<view class="">选择话题</view>
					<image src="/static/dialog_cha.png" mode="widthFix" @click="showTopicDialog=false"></image>
				</view>
				<scroll-view scroll-y class="topic-content-list" @scrolltolower="topicLower">
					<view class="topic-item" v-for="item in topicList" :key="item.id" @click="chooseTopic(item)">
						<topic-item :item="item" :canClick="false"></topic-item>
					</view>
				</scroll-view>

			</view>
		</van-popup>

		<!-- 选择项目弹框 -->
		<van-popup :show="showProjectDialog" position="bottom" custom-style="border-radius: 4rpx 4rpx 0rpx 0rpx"
			@close="showProjectDialog=false">
			<view class="topic-dialog">
				<view class="dialog-title">
					<view class="">选择项目</view>
					<image src="/static/dialog_cha.png" mode="widthFix" @click="showProjectDialog=false"></image>
				</view>
				<van-search :value="keyword" @change="keyword = $event.detail" placeholder="搜索" clearable
					@search="search" @clear="search" />
				<scroll-view scroll-y class="topic-content-list">
					<view class="project-item fx-center-between" v-for="item in projectList" :key="item.id"
						@click="chooseProject(item)">
						<view class="">
							<view class="fx-center project-name">
								<view class="">{{item.name}}</view>
								<image src="/static/baozhang.png" mode="widthFix" v-if="item.pl_safety"></image>
							</view>
							<view class="">
								{{item.summary}}
							</view>
						</view>
						<image :src="item.cover_url" mode="aspectFill" class="project-img"></image>
					</view>
				</scroll-view>

			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				type: null, //1发布动态，2参与话题

				imgList: [],

				showTopicDialog: false,
				showProjectDialog: false,
				page: 1,
				// 话题
				topicTotal: 0,
				topicList: [],
				choose_word: [],
				// 项目
				keyword: '',
				projectTotal: 0,
				projectList: [],
				choose_project: {}
			};
		},
		onLoad(e) {
			if (e.type) {
				this.type = Number(e.type)
				if (this.type === 1) {
					uni.setNavigationBarTitle({
						title: '发布动态'
					})
				} else if (this.type === 2) {
					uni.setNavigationBarTitle({
						title: '参与话题'
					})
					if (e.info) {
						this.choose_word.push(JSON.parse(e.info))
					}
				}
			}
			this.getTopicList()
			this.getProjectList()
		},
		computed: {
			// 获取选择的话题文字
			getWordText() {
				if (this.choose_word.length > 0) {
					return this.choose_word.map(item => {
						return '#' + item.name
					}).join(',')
				} else {
					return '添加话题'
				}
			},
			// 或者选择的项目文字
			getProjectText() {
				if (this.choose_project.id) {
					return this.choose_project.name
				} else {
					return '添加项目'
				}
			}
		},
		methods: {
			// 获取话题列表
			getTopicList() {
				this.$api.requst('/gwc/topics/words', {
					page: this.page,
					size: 50
				}).then((res) => {
					this.topicTotal = res.total
					this.topicList = res.data
				})
			},
			// 话题分页
			topicLower() {

			},
			// 获取项目列表
			getProjectList() {
				this.$api.requst('/gwc/projects', {
					page: 1,
					size: 50
				}).then((res) => {
					this.projectTotal = res.total
					this.projectList = res.data
				})
			},
			// 选择的话题
			chooseTopic(item) {
				this.choose_word.push(item)
				this.showTopicDialog = false
			},
			// 选择的项目
			chooseProject(item) {
				this.choose_project = item
				this.showProjectDialog = false
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			addImg(url) {
				let that = this;
				uni.chooseImage({
					count: 9, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						res.tempFilePaths.forEach(item => {
							that.imgList.push(item)
						})
					}
				});

			},
			search() {

			},
			async submit() {
				if (this.content.trim() == '') {
					this.$api.showError('内容不能为空！')
					return
				}
				uni.showLoading({
					title: '数据提交中...'
				})
				let ids = []
				// 评价文件
				for (let i = 0; i < this.imgList.length; i++) {
					let fid = await this.$api.requestUploadQNY(this.imgList[i])
					ids.push(fid.asset_id)
				}
				let list = {
					project_id: this.choose_project.id || '',
					payload: {
						content: this.content,
						file: ids.join(','),
						word_ids: this.choose_word.map(item => {
							return item.id
						})
					},
				}
				this.$api
					.requst('/gwc/topics/create', list, 'POST')
					.then((res) => {
						this.$api.showError('提交成功！')
						setTimeout(() => {
							uni.$emit('indexRefrash')
							uni.navigateBack()
						}, 1000)

					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.add-box {
		background-color: #fff;
		border-radius: 4rpx;
		padding: 32rpx;
		margin: 38rpx 32rpx;

		.textarea-box {

			textarea {
				width: 100%;
				min-height: 500rpx;
				font-size: 32rpx;
			}
		}

		.add-opration {
			margin-top: 38rpx;

			.add-item {
				font-size: 26rpx;
				color: #8A8F99;
				font-weight: bold;
				border-radius: 1224rpx 1224rpx 1224rpx 1224rpx;
				padding: 10rpx 14rpx;

				border: 2rpx solid #E2E2E2;
				margin-right: 8rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					flex-shrink: 0;
				}

				.add-item-text {
					max-width: 200rpx;
					@include fx-text-lang()
				}
			}

			.num-tip {
				font-size: 26rpx;
				color: #8A8F99;

				text {
					color: #5C5F66;
				}
			}

		}
	}

	.topic-dialog {
		padding: 30rpx 24rpx 0;

		.dialog-title {
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #161616;
			margin-bottom: 32rpx;
			position: relative;

			image {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				right: 0;
				top: 0
			}
		}

		.topic-content-list {
			max-height: 800rpx;
		}

		.topic-item {
			padding-bottom: 64rpx;
		}

		.project-item {
			margin-bottom: 24rpx;
			padding: 32rpx;
			border: 1rpx solid #E2E2E2;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-size: 26rpx;
			color: #161616;

			.project-name {
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 16rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 8rpx;
				}
			}

			.project-img {
				width: 96rpx;
				height: 96rpx;
				margin-left: 16rpx;
				flex-shrink: 0;
			}
		}
	}

	.upload-imgs-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.upload-box {
		width: 120rpx;
		height: 120rpx;
		margin-top: 24rpx;
		margin-right: 20rpx;
		border-radius: 4rpx;
	}

	.upload-imgs {
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		.del-icon {
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}

	.upload_camera {
		background: #F2F2F2;
		font-size: 22rpx;
		color: #A2A2A2;
	}

	::v-deep .van-search {
		border-radius: 4rpx;
		padding: 0 0 24rpx;
	}
</style>